<template>
   <div>
       
        <sub-vue ref="sub"></sub-vue>

        <div ref="myDiv">{{text}}</div>

   </div>
</template>

<script>
import SubVue from './sub.vue'
   export default {
       data () {
       return {
           text: '123'
       }
   },
   components: {
       subVue: SubVue
   },
    // 组件创建后，数据已经完成了初始化，但是DOM还没有生成   
   created(){               
       console.log('created:',this.$refs.myDiv);
   },
    // 数据装载后，各种数据已经就位，将数据渲染到DOM上，DOM已经生成
    mounted(){
        // 获取组件对象并获取到其DOM对象
        console.log('sub:',this.$refs.sub.$el);
        this.$refs.sub.$el.innerHTML = '来玩贪玩蓝月';

        // console.log('sub:',this.$refs.sub);
        console.log('mounted:',this.$refs.myDiv);
        this.$refs.myDiv.innerHTML = "大扎好，我是渣渣辉"
    }
 }
</script>

<style>
 
</style>
